// 审批耗时分析
import React, { Fragment } from 'react';
import { Card, Empty } from 'antd';
import ReactEcharts from '@/components/Echarts';
import { formatSecond } from '@/utils/utils';
import Locale from '@/utils/locale';

const { locale } = new Locale('flow.manage.stat');

const getOption = values => ({
    tooltip: {
        formatter: '{a}: {c}'
    },
    grid: {
        right: '30%',
        bottom: 20,
        top: 20
    },
    legend: {
        orient: 'vertical',
        left: '75%',
        y: 'center',
        data: values.map(item => item.name)
    },
    xAxis: {
        show: false,
        type: 'category',
        data: ['Mon']
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        axisLabel: {
            show: true,
            interval: 'auto'
        },
        splitNumber: 5,
        min: 0,
        minInterval: 1
    },
    series: values.map(item => ({
        data: [item.value],
        value: item.value,
        name: item.name,
        type: 'bar',
        barGap: '60%',
        label: {
            normal: {
                show: true,
                position: 'top',
                fontSize: 12
            }
        }
    }))
});

const Time = ({ data = {} }) => {
    const { values = [], averageApprovalTime, averageTakingTime } = data;
    const empty = values.length === 0;
    const averageApprovalTimeFixed = formatSecond(
        averageApprovalTime / 1000 / 60,
        true,
        true
    );
    const averageTakingTimeFixed = formatSecond(
        averageTakingTime / 1000 / 60,
        true,
        true
    );

    const option = getOption(values);
    return (
        <Card
            bordered={false}
            title={locale('sphsfx')}
            bodyStyle={{
                padding: empty ? 30 : 0
            }}
            style={{ position: 'relative' }}
        >
            {empty ? (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
            ) : (
                <Fragment>
                    <div className="descriptionText">
                        <div>
                            <span>
                                平均审批时间：
                                <em>{averageApprovalTimeFixed}</em>
                            </span>
                        </div>
                        <div>
                            <span>
                                平均流程耗时：
                                <em>{averageTakingTimeFixed}</em>
                            </span>
                        </div>
                    </div>
                    <ReactEcharts style={{ height: 245 }} option={option} />
                </Fragment>
            )}
        </Card>
    );
};

export default Time;
